<template>
  <div style="position:relative;">
    <div class="tuding">
      <img src="../../assets/image/tuding.png" alt="" />
    </div>
    <!-- 面包屑区域 -->
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="#">校园墙管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>表白墙管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片组件 -->
    <el-card class="box-card">
      <!-- 搜索部分 -->
      <el-row :gutter="20" style="margin-top:20px;">
        <el-col :span="8" style="margin-left:20px;">
          <el-input
            placeholder="请输入发布者"
            v-model="query"
            clearable
            @clear="getBiaobailist()"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getBiaobailist()"
            ></el-button> </el-input
        ></el-col>
        <el-col :span="8">
          <el-img
            src="../../assets/image/biaobai.png"
            fit="fill"
            style="width: 100px; height: 100px"
          ></el-img>
        </el-col>
      </el-row>
      <div class="biaobailogo">
        <img src="http://localhost:8090/biaobai.png" alt="" />
      </div>

      <!-- 表白墙内容表格 -->
      <el-table :data="BiaobaiContent" border style="width: 100%" stripe>
        <el-table-column label="序号" width="100px" type="index">
        </el-table-column>
        <el-table-column prop="name" label="发布者" width="100">
        </el-table-column>
        <el-table-column prop="content" label="内容" width="350">
        </el-table-column>
        <el-table-column prop="time" label="时间" width="180">
        </el-table-column>
        <el-table-column prop="dianzan" label="点赞" width="100">
        </el-table-column>
        <!-- <el-table-column prop="comments" label="评论" width="100">
        </el-table-column> -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-tooltip
              effect="light"
              content="编辑内容"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="
                  editcontent(
                    scope.row.id,
                    scope.row.name,
                    scope.row.content,
                    scope.row.time,
                    scope.row.dianzan
                  )
                "
              ></el-button>
            </el-tooltip>
            <!-- 删除按钮 -->
            <el-tooltip
              effect="light"
              content="删除内容"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="deletebiaobai(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页部分 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 修改用户的对话框 -->
    <el-dialog
      title="编辑内容"
      :visible.sync="edituservisible"
      width="40%"
      @close="resetform"
      top="10vh"
    >
      <!-- 内容主题区域 -->
      <el-form
        :model="editform"
        :rules="editformrule"
        ref="editFormRef"
        width="500px"
        label-width="100px"
      >
        <el-form-item label="内容序号">
          <el-input v-model="editform.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="发布者">
          <el-input v-model="editform.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="editform.content"></el-input>
        </el-form-item>
        <el-form-item label="发布时间" prop="time">
          <el-input v-model="editform.time"></el-input>
        </el-form-item>
        <el-form-item label="点赞数量" prop="dianzan">
          <el-input v-model="editform.dianzan"></el-input>
        </el-form-item>
        <!-- <el-form-item label="年龄" prop="age">
          <el-input v-model="editform.age"></el-input>
        </el-form-item> -->
      </el-form>
      <!-- 结束内容主题区 -->
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="edituservisible = false">取 消</el-button>
        <el-button type="primary" @click="edituserover">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改用户对话框结束 -->
  </div>
</template>

<script>
export default {
  data() {
    const isNum = (rule, value, callback) => {
      const age = /^[0-9]*$/;
      if (!age.test(value)) {
        callback(new Error("点赞数量只能为数字"));
      } else {
        callback();
      }
    };
    return {
      BiaobaiContent: [
        {
          name: "",
          content: "",
          time: "",
          dianzan: "",
          comments: "",
          id: "",
        },
      ],
      // 每页显示多少条
      pagesize: "2",
      // 当前页数
      pagenum: "1",
      total: "",
      query: "",
      // 是否可见对话框
      adduservisible: false,
      addFormrules: {
        id: [
          {
            required: true,
            message: "请输入学号",
            trigger: "blur",
          },
          {
            min: 10,
            max: 12,
            message: "学号长度应为10-12个字符",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 10,
            message: "用户名长度应为2-10个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 15,
            message: "密码长度应为6-15个字符",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入电话",
            trigger: "blur",
          },
        ],
        sex: [
          {
            required: true,
            message: "请输入性别",
            trigger: "blur",
          },
        ],
        age: [
          {
            required: true,
            message: "请输入年龄",
            trigger: "blur",
          },
        ],
      },
      // 修改内容区域
      edituservisible: false,
      editform: {
        id: "",
        name: "",
        content: "",
        time: "",
        dianzan: "",
      },
      editformrule: {
        content: [
          {
            required: true,
            message: "请输入内容",
            trigger: "blur",
          },
        ],
        time: [
          {
            required: true,
            message: "请输入时间",
            trigger: "blur",
          },
        ],
        dianzan: [
          {
            required: true,
            message: "请输入点赞数量",
            trigger: "blur",
          },
          {
            validator: isNum,
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getBiaobailist();
  },
  methods: {
    getBiaobailist() {
      this.$http
        .post("http://localhost:8090/content/biaobaiquery", {
          name: this.query,
          pagenum: this.pagenum,
          pagesize: this.pagesize,
        })
        .then((res) => {
          this.BiaobaiContent = res.data.biaobaiList;
          console.log(res.data.biaobaiList);

          this.total = res.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange(newsize) {
      this.pagesize = newsize;
      this.getBiaobailist();
    },
    handleCurrentChange(newpage) {
      this.pagenum = newpage;
      this.getBiaobailist();
    },
    // 重置添加用户验证
    resetform() {
      this.$refs.addFormRef.resetFields();
      this.$refs.editFormRef.resetFields();
    },
    // 增加用户
    adduser() {
      this.$refs.addFormRef.validate((vaild) => {
        if (!vaild) return this.$message.error("添加用户失败");
        this.$http.post("students/adduser", this.addForm).then((res) => {
          this.getUserlist();
          this.$message.success("添加成功");
          this.adduservisible = false;
        });
      });
    },
    // 修改内容显示对话框
    editcontent(id, name, content, time, dianzan) {
      this.edituservisible = true;
      this.editform.id = id;
      this.editform.name = name;
      this.editform.content = content;
      this.editform.time = time;
      this.editform.dianzan = dianzan;
      // this.editform.age = age;
    },
    // 修改用户完成 发送请求
    edituserover() {
      this.$refs.editFormRef.validate((vaild) => {
        if (!vaild) {
          return this.$message.error("修改不符合规则");
        }
        this.$http
          .post("http://localhost:8090/content/updatebiaobai", this.editform)
          .then((res) => {
            if (res.data !== 1) {
              return this.$message.error("修改失败");
            }
            this.$message.success("修改成功");
            this.edituservisible = false;
            this.getBiaobailist();
          });
      });
    },
    // 删除用户
    deletebiaobai(id) {
      this.$confirm("此操作将永久删除该内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(id);
          this.$http
            .post("http://localhost:8090/content/deletebiaobai", { id: id })
            .then((res) => {
              this.getBiaobailist();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style scoped>
.biaobailogo {
  position: absolute;
  right: 10px;
  /* width: 100px; */
  top: 10px;
}
.biaobailogo img {
  width: 220px;
}
.box-card {
  position: relative;
}
.tuding {
  position: absolute;
  left: -15px;
  top: 10px;
  z-index: 10;
}
</style>
